<template>
	<image :src="src" lazy-load :style="imageStyle" :class="imageClass" @load="loadImage" @click="$emit('click')"
		class="bg-hover-light"></image>
</template>

<script>
	export default {
		name: "free-image",
		props: {
			src: {
				type: String,
				default: ""
			},
			imageClass: {
				type: String,
				default: ""
			},
			maxWidth: {
				type: Number,
				default: 500 // rpx
			},
			maxHeight: {
				type: Number,
				default: 350 // rpx
			}
		},
		data() {
			return {
				h: 100,
				w: 100
			}
		},
		computed: {
			imageStyle() {
				return `width:${this.w}px;height:${this.h}px;`
			}
		},
		methods: {
			// 加载图片
			loadImage(e) {
				let w = e.detail.width
				let h = e.detail.height
				// // 最大宽度 px
				let maxW = uni.upx2px(this.maxWidth)
				// 最大高度
				let maxH = uni.upx2px(this.maxHeight)
				if (h <= maxH) {
					// 用原来的宽高
					this.w = w <= maxW ? w : maxW
					this.h = h
				} else {
					// 最大宽度*(高度/宽度)
					let h2 = maxW * (h / w)
					this.h = h2 <= maxH ? h2 : maxH
					// 最大高度*(宽度/高度)
					let w2 = maxH * (w / h)
					this.w = w2 <= maxW ? w2 : maxW
				}
			},
		},
	}
</script>

<style>
</style>
